<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.4.8/dist/vue-router.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 路由占位符 -->
        <router-view></router-view>
 
       
    </div>

    <script>
        // 定义app根组件
        const App={
            template:`
            <div>
            <div class="header">
                <h2>后台管理系统</h2>
            </div>
            <div class="main">
                <div class="main-left">
                    <ul>
                        <li><router-link to="/users">用户管理</router-link></li>
                        <li><router-link to="/rights">权限管理</router-link></li>
                        <li><router-link to="/goods">商品管理</router-link></li>
                        <li><router-link to="/orders">订单管理</router-link></li>
                        <li><router-link to="/settings">系统设置</router-link></li>
                    </ul>
                </div>
                <div  class="main-right">
                    <!-- 路由出口 -->
                    <router-view></router-view>
                </div>
            </div>
            <div class="footer">
                <h3>版权信息</h3>
            </div>
        </div>
            `
        }

        // 添加组件
        const Users={
            data(){
                return{
                    // 自定义用户数据
                    userList:[
                        {id:1,name:'张三',age:20},
                        {id:2,name:'李四',age:22},
                        {id:3,name:'王五',age:23},
                        {id:4,name:'赵六',age:24},
                    ]
                }
            },
            methods:{
                goDetail(id){
                    console.log(id);
                    this.$router.push("/userinfo/"+id)
                }
            },
            template:`
            <div>
            <h3>用户管理组件</h3>
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in userList" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td>
                            <a href="JavaScript:;" @click="goDetail(item.id)">详情</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
            `
        }
        // 用户详情页组件
        const UserInfo={
            props:['id'],
            template:`
            <div>
            <h1>用户详情页 用户ID：{{id}}</h1>
            <button @click="goBack()">后退</button>
         </div>
            `,
            methods:{
                goBack(){
                    this.$router.go(-1)
                }
            }
        }
        const Rights={
            template:`
            <h3>权限管理组件</h3>
            `
        }
        const Goods={
            template:`
            <h3>商品管理组件</h3>
            `
        }
        const Orders={
            template:`
            <h3>订单管理组件</h3>
            `
        }
        const Settings={
            template:`
            <h3>系统设置组件</h3>
            `
        }

        const router =new VueRouter({
            // 定义路由规则
            routes:[
                {
                    path:'/',
                    component:App,
                    // 重定向
                    redirect:'/users',
                    // 子路由
                    children:[
                        {path:'/users',component:Users},
                        {path:'/userinfo/:id',component:UserInfo,props:true},
                        {path:'/rights',component:Rights},
                        {path:'/goods',component:Goods},
                        {path:'/orders',component:Orders},
                        {path:'/settings',component:Settings},
                        
                    ]
            }
            ]
        })




        var vm=new Vue({
            el:'#app',
            // 路由挂载
            router
        })

    </script>

</body>
</html>